<template>
  <div class="graph-card">
    <div class="graph-container" ref="container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useChartStore } from '@/stores/chartStore';

const props = defineProps({
  title: String,
  data: {
    type: Object,
    required: true,
    validator: (value) => {
      return value.nodes && value.dependencies;
    }
  },
  projects: {
    type: Array,
    required: true
  }
});

const container = ref(null);
const chartStore = useChartStore();

onMounted(() => {
  chartStore.initChart(container.value);
  chartStore.updateChart(props.data, props.projects);
});
</script>

<style scoped>
.graph-card {
  width: 100%;
  height: 600px;
}

.graph-container {
  width: 100%;
  height: 100%;
}
</style> 